<%--
  Created by IntelliJ IDEA.
  User: FOREST
  Date: 2021/7/17
  Time: 15:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>登录</title>
</head>
<body>
<div id="login-frame">
  <p id="image-logo"><img src="image/login/denglu.jpg" style="width: 50px;height: 50px;"></p>
  <form id="login-form" method="get">
    <p><label class="label-input">用户名</label><input type="text" id="username" name="username" class="text-field" maxlength="20"/></p>
    <p><label class="label-input">密码</label><input type="password" id="password" name="password" class="text-field" maxlength="10"/></p>
    <div id="login-control">
      <input type="submit" id="btn-login" value="登录" onclick="onLogin()"/>
      <a id="forget-pwd" href="#">忘记密码？</a>
    </div>
  </form>
</div>
</body>
</html>
<script>
  //写一个点击事件，判断用户登录情况，是否跳转
  function onLogin() {
    var oForm=document.getElementById('login-form');
    var sUser=document.getElementById('username').value;
    var sPwd=document.getElementById('password').value;
    if (sUser==""||sPwd=="") {
      alert('用户名或密码不能为空');
    }else if (sUser!="admin"||sPwd!="admin") {
      alert('用户名或密码错误');
    }else {
      oForm.action="welcome.jsp";
    }

  }
</script>
<style>
  body {
    /*让背景图片拉伸且占据整个屏幕*/
    background-image: url("image/login/denglu.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  #login-frame {
    /*让一个div块在整个屏幕居中*/
    width: 400px;
    height: 260px;
    padding: 13px;
    position: absolute;
    left: 50%;
    top: 50%;
    /*其中的margin-left和margin-top最好是设为width和height的一半值，
    那样是完全居中的效果，当然记得前面要加个负号*/
    margin-left: -200px;
    margin-top: -200px;
    /*设置背景颜色且加透明效果*/
    background-color: rgba(240, 255, 255, 0.5);
    /*设置圆角*/
    border-radius: 10px;
    text-align: center;
  }
  /*让输入框和label对齐居中*/
  form p > * {
    display: inline-block;
    vertical-align: middle;
  }

  #image-logo {
    margin-top: 22px;
  }

  .label-input {
    font-size: 14px;
    font-family: 宋体;

    width: 65px;
    height: 28px;
    line-height: 28px;
    text-align: center;

    color: white;
    background-color: deepskyblue;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .text-field {
    width: 278px;
    height: 28px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 0;
  }

  #btn-login {
    font-size: 14px;
    font-family: 宋体;
    /*给一个label或者button里面的文字设置居中*/
    width: 120px;
    height: 28px;
    line-height: 28px;
    text-align: center;

    color: white;
    background-color: deepskyblue;
    border-radius: 6px;
    border: 0;

    float: left;
  }

  #forget-pwd {
    font-size: 12px;
    color: black;
    /*去除链接的下划线*/
    text-decoration: none;
    position: relative;
    float: right;
    top: 5px;

  }

  #forget-pwd:hover {
    color: white;
    text-decoration: underline;
  }

  #login-control {
    padding: 0 28px;
  }
</style>
